<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TgPage</title>
<link rel="stylesheet" type="text/css" href="lib/easyui/themes/black/easyui.css">
<link rel="stylesheet" type="text/css" href="lib/easyui/themes/icon.css">
<script type="text/javascript" src="lib/easyui/jquery.min.js"></script>
<script type="text/javascript" src="lib/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="lib/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">

   <div data-options="region:'north'" style="height:50px">
   <button onclick="show()">预览</button>
   </div>
   <div data-options="region:'south',split:true" style="height:30px;"></div> 
    <div data-options="region:'west',split:true" style="width:40%; ">
      <div  class="easyui-tabs" style="height:100%;width:100%;">
        <div title="Html" style="padding-top: 10px" data-options="content:'<iframe scrolling=no frameborder=0 name=html id=html src=./html.html style=width:98%;height:98%; ></iframe>'" >        

        </div>
        <div title="Css" style="padding-top: 10px" data-options="content:'<iframe scrolling=no frameborder=0 name=css id=css src=./css.html style=width:98%;height:98%; ></iframe>'" >
       
        </div>   	
        <div title="Javascript" style="padding-top: 10px"  data-options="content:'<iframe scrolling=no frameborder=0 name=javascript id=javascript src=./javascript.html style=width:98%;height:98%; ></iframe>'" >
          
        </div>
        <div title="Json" style="padding-top: 10px" data-options="content:'<iframe scrolling=no frameborder=0  name=json id=json src=./json.html style=width:98%;height:98%; ></iframe>'" >
          
        </div>
        
        </div>
    </div>
    <div data-options="region:'center'" title="预览" > 
    <div   style="width:794px;background-color: #FFFFFF;margin:10px auto;">
    <iframe scrolling="yes" frameborder="0" name="xpage" id="xpage" style="width:100%;min-height:1123px;" ></iframe>
    </div>
    </div>

<script type="text/javascript">
$(document).ready(function(){


});

function show() {
	var iframe_html = document.getElementById('html' ) || document.frames['html'];
    var html= iframe_html.contentWindow.getHtml();
 alert(html)
    var iframe_css = document.getElementById('css' ) || document.frames['css'];
    var css= iframe_css.contentWindow.getCss();
    var iframe_javascript = document.getElementById('javascript' ) || document.frames['javascript'];
    var javascript= iframe_javascript.contentWindow.getJavascript();
    var iframe_json = document.getElementById('json' ) || document.frames['json'];
    var json= iframe_json.contentWindow.getJson();
    var iframe = document.getElementById('xpage' ).contentDocument || document.frames['xpage'].document;
    document.getElementById('xpage' ).contentWindow.document.body.innerText = "";

    iframe.write(html);
    iframe.write("<style>"+css+"</style>");

 
   
}



</script>
   
</body>
</html>